import Taro, {Component, Config} from "@tarojs/taro";
import {View, Input, Picker, Image, Text, ScrollView} from "@tarojs/components";
import {getRuntime, pageSize, subtime} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import './index.less'
import './page4.less'

// 工程金融中心-其他工程服务
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Page3 extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    allProvince: [],
    allCity: [],
    allDistrict: [],
    provinceId: -1, // 云南省
    cityId: -1, // 昆明市
    districtId: -1, // 盘龙区
    pageIndex:1,
    pageSize,
    items:[],
    totalCount: 0
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '其他工程服务'})
    this.getAllProvince()
    this.getAllCity()
    this.getAllDistract()
    this.getAllProjectInfo()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  // 获取工程项目信息
  getAllProjectInfo() {
    let { FinancialCenterStore }  = this.props.stores
    let {provinceId, cityId, districtId, pageIndex,allProvince,allCity,allDistrict} = this.state
    FinancialCenterStore.getAllProjectInfo({
      provinceId: provinceId === -1 ? null : allProvince[provinceId]['value'],
      cityId: provinceId === -1 ? null : allCity[cityId]['value'],
      districtId: provinceId === -1 ? null : allDistrict[districtId]['value'],
      pageIndex,
      pageSize,
      callback: (res) => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)
          })
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items
          })
        }
      }
    })
  }
  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllProjectInfo()
      })
    }
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        })
      }
    })
  }
  getAllCity(index:number=-1) {
    let { AreaStore } = this.props.stores
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        this.setState({
          allCity: res
        })
      }
    })
  }
  getAllDistract(indexProvince:number=-1,indexCity:number=-1) {
    let { AreaStore } = this.props.stores
    AreaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        this.setState({
          allDistrict: res
        })
      }
    })
  }

  /**
   * @param type
   * @param column  [0:省,1:市,2:区]
   * @param value 对应省市区的索引值
   */
  changeOption(type: string, column: number, value?: number) {
    let { allProvince,allCity,allDistrict } = this.state
    if(column===0){
      this.getAllCity(value)
      this.getAllDistract(value,0)
      let cityId = value === -1 ? -1 : 0
      let districtId = value === -1 ? -1 : 0
      this.setState({
        [type]: value,
        cityId,
        districtId
      }, () => {
        this.getAllProjectInfo()
      })
    }
    else if(column===1){
      this.getAllDistract(this.state.provinceId,value)
      let districtId = value ===-1 ? -1 : 0
      this.setState({
        [type]:value,
        districtId,
      }, () => {
        this.getAllProjectInfo()
      })
    }
    else {
      this.setState({
        [type]:value,
      }, () => {
        this.getAllProjectInfo()
      })
    }
  }

  handelUpgrade(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  render() {
    let {allProvince, provinceId, allCity, cityId, allDistrict, districtId, items} = this.state
    return (
      <View className='other'>
        <View className='select-option pb0'>
          <View className='option-item' >
            <View className={provinceId === -1 ? 'option  option-active' : 'option'}
                  onClick={this.changeOption.bind(this,'provinceId',0,-1)}
            >全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
            >
              {
                allProvince.map((item, index) => {
                  return(
                    <View className={provinceId === index ? 'option  option-active' : 'option'} key={item.id}
                          onClick={this.changeOption.bind(this,'provinceId',0,index)}
                    >{item.label}</View>
                  )
                })
              }
            </ScrollView>
          </View>

          <View className='option-item'
                style={allCity.length<=0 ? {'display': 'none' } : ''}
          >
            <View className={cityId===-1 ? 'option  option-active' : 'option'}
                  onClick={this.changeOption.bind(this,'cityId',1,-1)}
            >全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
              onScroll={this.onScroll}
            >
              {
                allCity.map((item,index) => {
                  return(
                    <View className={cityId === index ? 'option  option-active' : 'option'} key={item.id}
                          onClick={this.changeOption.bind(this, 'cityId',1,index)}>{item.label}</View>
                  )
                })
              }
            </ScrollView>
          </View>

          <View className='option-item' style={allDistrict.length<=0 ? {'display':'none'} : ''}>
            <View className={districtId===-1 ? 'option  option-active' : 'option'}
                  onClick={this.changeOption.bind(this,'districtId',2,-1)}
            >全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
            >
              {
                allDistrict.map((item,index) => {
                  return(
                    <View className={districtId === index ? 'option  option-active' : 'option'} key={item.value}
                          onClick={this.changeOption.bind(this, 'districtId',2,index)}
                    >{item.label}</View>
                  )
                })
              }
            </ScrollView>
          </View>
        </View>

        <View className='interval'/>
        <View className='list-03'>
          {
            items.length>0&&
            items.map((item,index) => {
              return(
                <View className='list-03-item' key={item.id} onClick={this.handelRouter.bind(this, '/pages/finance/page4_detail?id='+item.id)}>
                  {index<3&& <View className='label'>热</View>}
                  <View className='r'>
                    <View className={'title'}>{item.projectName}</View>
                    <View className={'info'}>
                      <Text className={'date'}>{subtime(item.creationTime)}</Text>
                      <Text className={'date'}>{item.area}</Text>
                    </View>
                  </View>
                </View>
              )
            })
          }
          {
            items.length<=0&&
              <View className='page-none-info'>暂时没有任何项目信息~</View>
          }
        </View>

        <View className='footer-block'/>
        <View className='page-submit'
              onClick={this.handelUpgrade.bind(this, '/pages/finance/page4_demand')}>发布工程项目信息</View>
      </View>
    )
  }
}

export default Page3
